<template>
	<view class="my-container">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<image class="avatar" :src="user.avatar"></image>
			<view class="user-details">
				<view class="nickname">{{user.username}}</view>
				<!-- <view class="phone">18838298839</view> -->
			</view>
			<!-- <view class="auth-btn">微信授权<image style="width: 11rpx; height: 20rpx; margin-left: 12rpx;" src="/static/img/jr.png"></image></view> -->
		</view>

		<!-- 功能菜单区域 -->
		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(index)">
				<view class="menu-icon">
					<image :src="item.icon"></image>
				</view>
				<view class="menu-text">{{item.text}}</view>
				<view class="menu-arrow">
					<image style="width: 11rpx; height: 20rpx;" src="/static/img/jr.png"></image>
					<!-- <image src="/static/img/sj.png"></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {

		data() {
			return {
				menuList: [
					{
						text: '上门预约服务',
						icon: '/static/img/fz.png'
					},
					{
						text: '我的预约服务',
						icon: '/static/img/sj.png'
					}
				],
				user:{}
			}
		},
		onLoad(){
			this.user=JSON.parse(localStorage.getItem('userInfo')) 
			console.log('user',this.user.avatar);
		},
		methods: {
			handleMenuClick(index) {
				// // 处理菜单点击事件
				// uni.showToast({
				// 	title: '点击了: ' + this.menuList[index].text,
				// 	icon: 'none'
				// });
				if(index==0){
					// uni.showToast({
					// 	title: '点击了: ' + this.menuList[index].text,
					// 	icon: 'none'
					// });
					     uni.switchTab({
					        url: `/pages/index/index`,
					     
					      });
					// wx.navigateTo({
					//   url: '/pages/my/components/reservation' // 目标页面路径，可带参数
					// })
				}else{
					wx.navigateTo({
					  url: '/pages/my/components/rook' // 目标页面路径，可带参数
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	$primary-color: #e64340;
	$gray-bg: #f5f5f5;
	$white: #ffffff;
	$text-color: #333333;
	$text-gray: #666666;
	$border-color: #eeeeee;

	.my-container {
		background-color: $gray-bg;
		min-height: 100vh;

		.user-info {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			background-color: $white;
			margin-bottom: 20rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.user-details {
				flex: 1;
                
				.nickname {
					font-size: 36rpx;
					font-weight: bold;
					color: $text-color;
				}

				.phone {
					font-size: 26rpx;
					color: $text-gray;
					margin-top: 10rpx;
				}
			}

			.auth-btn {
				font-size: 28rpx;
				color: #221F1C;
			
			
			}
		}

		.menu-list {
		

			.menu-item {
				display: flex;
				align-items: center;
				padding: 26rpx 30rpx 34rpx 42rpx;
				// border-bottom: 1rpx solid $border-color;
                 margin-bottom: 18rpx;
				 	background-color: #fff;
				.menu-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.menu-text {
					font-size: 28rpx;
					color: #221F1C;
					flex: 1;
				}

				.menu-arrow {
					width: 20rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>